<template>
  <div id="asd">
<!--    <canvas id="canvas2" class="share-container" style="border: 1px solid black-->
<!--    ;width: 600px;height: 500px;"/>-->
    <canvas id="canvas2" class="share-container" style="border: 1px solid black;
"/>
    <div style="display:block;">
      <input type="text" v-model = "cur">
      <img id="img1" src="../assets/1.jpg" @click="btnEvent(1)" class="img" alt="">
      <img id="img2" src="../assets/2.jpg" @click="btnEvent(2)" class="img" alt="">
      <img id="img3" src="../assets/3.jpg" @click="btnEvent(3)" class="img" alt="">
      <img id="img4" src="../assets/4.jpg" @click="btnEvent(4)" class="img" alt="">
      <img id="img5" src="../assets/5.jpg" @click="btnEvent(5)" class="img" alt="">
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        history: [1,2,3,4,5],
        cur: 1
      }
    },
    mounted() {
      // HACK:加上延时避免 mounted 方法比页面加载早执行
      this.$nextTick(() => {
        setTimeout(() => {
          console.debug("mounted")
        }, 100);
      });
    },
    methods: {
      btnEvent(i){
        let his = this.history
        his[this.cur] = i
        const canva=document.getElementById("canvas2");
        const cansText=canva.getContext("2d");
        canva.width = 500
        canva.height = 500
        cansText.clearRect(0,0,canva.width, canva.height)

        for (let j = 0; j < his.length; j++) {
          console.debug(j)
          var img=document.getElementById("img"+(this.history[j]));
          if (img.complete){
            // cansText.drawImage(img, j*600, 50+j*200, 200, 200)
            cansText.drawImage(img, 10, 50, 200, 200)
          }else {
            img.onload = function () {
              // cansText.drawImage(img, j*600, 50+j*200, 200, 200)
              cansText.drawImage(img, 10, 50, 200, 200)
            }
          }

        }

      },//btnEvent end
    },
    watch:{

    }
  }
</script>

<style scoped>
  .img{
    width: 50px;height: 50px;
  }
  /* 放置合成图片的尺寸 */
  .share-container {
    width: 353.5px;
    height: 525px;
  }
</style>
